import { TableHTMLAttributes } from "react"
import { Link } from "react-router-dom"
import styled from "styled-components"
import { UserProps } from "type/user"

interface ListProps extends TableHTMLAttributes<HTMLTableElement> {
  users: UserProps[];
  lists: any[];
  loading?: boolean;
}

export const List = ({ users, lists, loading, ...props }: ListProps) => {
  return (
    <div>
      {loading ? <div>加载中...</div> :
        <ListTable {...props}>
          <thead>
            <tr>
              <th>1</th>
              <th>2</th>
            </tr>
          </thead>
          <tbody>
            {lists?.map((list: any) => (<tr key={list?.id}><td>{list?.organization}</td><td><Link to={"/projects/" + list?.id}>{list?.name}</Link></td></tr>))}
          </tbody>
        </ListTable>}
    </div>
  )
}

const ListTable = styled.table`
  width: 100%;
  th,td {
    border: solid #ccc 1px;
  }
`